/*
 offsetParent：获取父级参照物
    和HTML层级结构没有必然的关系！
    在所在的文档流中，最外层元素，是其后代所有元素的父级参照物！
    + 默认情况下，所有元素的父级参照物都是body；body的父级参照物是null；
    + 我们可以基于定位，让元素脱离文档流，这样也改变了很多元素的父级参照物！
 offsetLeft/Top：距离父参照物的左偏移(或上偏移) 
    + 从元素本身的外边框开始，距离父级参照物的内边框，是获取的偏移值

 获取任意元素距离body(页面)的左偏移和上偏移「此元素的父级参照物不是确定的」

 基于盒子模型属性获取到的值，都是整数「默认四舍五入」！！
 */
const offset = function offset(elem) {
    // 首先获取自己的偏移值
    let left = elem.offsetLeft,
        top = elem.offsetTop,
        parent = elem.offsetParent;
    // 如果父级参照物存在且不是BODY:我们加上父级参照物的边框和偏移
    while (parent && parent.tagName !== "BODY") {
        left += parent.clientLeft + parent.offsetLeft;
        top += parent.clientTop + parent.offsetTop;
        // 继续查找其父参照物的父参照物
        parent = parent.offsetParent;
    }
    // 返回获取的偏移值
    return {
        top,
        left
    };
};
const outer = document.querySelector('#outer'),
    inner = document.querySelector('#inner');

